<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3"></script>
    <title>tempText</title>
    <style type="text/css">
        #h1 {
            color: brown;
        }
    </style>
</head>
<body>
    <!-- 利用 vue 实现计数器的功能 -->
    <div id="Application" style="text-align: center;">
        <h1>这里是模板的内容：{{ count }}次点击</h1>
        <h1>这里是单次插值的内容：{{ onceCount }}次点击</h1>
        <h1 v-once>这里是 HTML 插值表达式的内容：{{ countHTML }} 次点击</h1>
        <h1 v-once>这里是 v-html HTML 插值的效果：<span v-html="countHTML2"></span> 次点击</h1>
        <h1 v-bind:id="id1">这里是v-bind模板的内容 {{count}} 次点击：</h1>
        <button v-once:click="clickButton">按钮</button>
    </div>
    <script>
        // 定义一个Vue组件，名为 Application
        const App = {
            // 定义一个data属性，用于存储数据
            data() {
                return {
                    count: 1, // 目前只用到 count 这个属性
                    onceCount: 0,
                    countHTML: "<span style='color: red;'>10</span>",
                    countHTML2: "<span style='color: red;'>10</span>",
                    id1: "h1"
                } 
            },
            // 定义一个methods属性，用于存储方法
            methods: {
                clickButton() {
                    this.count = this.count + 1;
                    this.onceCount = this.onceCount + 1;
                }
            }
        }
        // 将 Vue 组件绑定到页面中 id 为 Application 的元素上
        Vue.createApp(App).mount("#Application")
    </script>
</body>
</html>
